<template>
  <div class="review">
    <heads title="我的评价"></heads>
    <div class="main-content">
      <van-pull-refresh v-if="list.length > 0" v-model="refreshing" @refresh="getListData">
         <van-cell-group v-for="(listItem,listIndex) in list" :key="listIndex">           
            <van-cell value>
              <template #default>
                <div class="cell-title flex space-between">
                  <div class="img-box flex">
                     <van-image
            round
            width=".56rem"
            height=".56rem"
            :src="listItem.head_img ? listItem.head_img : 'https://img.yzcdn.cn/vant/cat.jpeg'"
          /><span class="name"><em v-if="listItem.is_show === 2">{{ listItem.wechat_name }}</em> <i v-if="listItem.is_show === 1">(匿名)</i></span> <div class="rate-box flex" v-for="(item,index) in listItem.start" :key="index"> <van-icon name="star" color="#FFD800 "/></div>
                  </div>
                  <div class="person-check">
                    {{ listItem.created_at }}
                  </div>
                </div>
                <div class="item flex">
                  {{ listItem.content }}
                </div>
              </template>
            </van-cell>
          </van-cell-group>
      </van-pull-refresh>
      <div v-else class="empty-box">
         没有更多数据了
       </div>
      
    </div>
  </div>
</template>

<script>
import Mock from "mockjs";
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve)
  },
  data() {
    return {
      refreshing:false, 
      platform:false,     
      list:[]
    };
  },
  
  methods: {
    // 数据
    getListData() {
      this.refreshing = true;
   let _this = this;
       this.$ajax
            .post(`${this.$baseUrl}/sender/myComment`)
            .then(function(res) {
              if (res.data.code == 200) {               
                _this.list = res.data.data;


              }
            })
            .catch(function(error) {
              console.log(error);
      });
      
    
      this.refreshing = false;
    },
  },
  created() {
    this.getListData()
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.review {
  .main-content {
     min-height: 92vh;
    margin-top: 0;
    padding: 0.3rem;
    box-sizing: border-box;
  }
 
  .van-cell {
    padding: 0.3rem;
    border-radius: .1rem;
  }
  /deep/ .van-cell-group{
    margin-bottom: .3rem;
    border-radius: .1rem;
    .cell-title{
      font-size: .3rem;
      color: #333;
      .img-box{
      
        .name{
          padding: 0 .2rem;
          em{
            font-style: normal;
          }
          i{
            // padding-left: .rem;
           font-size: .2rem;
           color: #999;
          }
        }
        .rate-box{
          margin-right: .1rem;
        }
        
      }
      .person-check{
        font-size: .22rem;
        color: #999;
       
      }
    }
    .item{
      padding-top: .3rem;
      font-size: .3rem;
      justify-content: center;
      color: #999;
    }
  }
 
}
</style>
